<template>
   <el-form ref="ruleFormRef" :model="chiruleForm" status-icon :rules="rules" label-width="70px" class="demo-ruleForm">
      <el-form-item :label="item.label" :prop="item.prop" v-for="(item, index) in Props.FormData" :key="index">
         <el-input v-model="chiruleForm[item.prop]" :type="item.type" :autocomplete="item.autocomplete" />
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="chisubmitForm(ruleFormRef)">{{ Props.LogType }}</el-button>
         <el-button @click="chiresetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
   </el-form>
</template>
 
<script setup lang="ts">
// 表单区域
import { dialogEmits, type FormInstance, type FormRules } from 'element-plus';
import { ref, reactive, toRefs } from 'vue';
// 父组件传递过来的方法
const Emits: any = defineEmits(['LoginsubmitForm', 'resetForm', 'LogonsubmitForm']);
// 父组件传递过来的数据 根据数据去动态渲染表单
const Props: any = defineProps(['FormData', 'ruleForm', 'LogType']);
const chiruleForm: any = Props.ruleForm;
// 格式：
// 第一个数据是数组包含几个对象，渲染相应的input框 
// const FormData = reactive([
//     {
//         label: '账号',
//         prop: 'users',
//         type: 'text',
//         autocomplete: 'off',

//     },
// ]);
// 第二个数据是v-model双向绑定的数据
// const ruleForm: any = reactive({
//     users: '',
//     password: '',
// });

// 表单的验证规则
const ruleFormRef = ref<FormInstance>();

const validatePass = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('请输入密码'));
   } else {
    
      if (value.length >= 6) {

         if (chiruleForm.users !== '') {
            if (!ruleFormRef.value) return;

            ruleFormRef.value.validateField('users', () => null);
         }
         if (chiruleForm.verifypassword && chiruleForm.verifypassword !== chiruleForm.password) {
            callback(new Error('两次输入密码不一致'));
         }
         callback();

      } else {

         callback(new Error('密码长度不正确'));
      }
   }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('请输入账号'));
   } else {

      if (value.length >= 6) {

         callback();

      } else {
         callback(new Error('账号长度不正确'));
      }

   }
};
const validatePass3 = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('请输入密码'));
   } else {
      if (value.length >= 6) {

         if (chiruleForm.users !== '') {
            if (!ruleFormRef.value) return;

            ruleFormRef.value.validateField('users', () => null);
         }
         if (chiruleForm.verifypassword && chiruleForm.verifypassword !== chiruleForm.password) {
            callback(new Error('两次输入密码不一致'));
         }
         callback();

      } else {
         callback(new Error('密码长度不正确'));
      }
   }
};

const rules = reactive<FormRules<typeof chiruleForm>>({
   users: [{ validator: validatePass2, trigger: 'blur' }],
   password: [{ validator: validatePass, trigger: 'blur' }],
   verifypassword: [{ validator: validatePass3, trigger: 'blur' }],
});

// 点击确定按钮事件
const chisubmitForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.validate((valid) => {
      if (valid) {
         if (Props.LogType === '登录') {
            Emits('LoginsubmitForm', chiruleForm);
         } else {
            Emits('LogonsubmitForm', chiruleForm);
         }
      } else {
         console.log('error submit!');
         return false;
      }
   });
};


// 取消按钮事件，清空表单
const chiresetForm = (formEl: FormInstance | undefined) => {
   Emits('resetForm', formEl);
};

</script>
 
<style scoped></style>